<template>
	<view>
		<view class="topfixed">
			<view class="search_top">
				<uni-icons type="search" size="24" color="#D1CDCD"></uni-icons>
				<input auto-focus placeholder-class="inputclass" placeholder="搜索" v-model="inputClearValue"
					confirm-type="search" @confirm='confirminput' @input="changevalue" />
				<uni-icons v-if="showClearIcon" color="#D1CDCD" type="clear" size="24" @click="clearIcon"></uni-icons>
			</view>
		</view>
		<view class="search_ls" v-if="searchList.length !=0 &&keyWord ==''">
			<view class="tit">
				搜索历史
				<!-- <uni-icons type="trash" size="20" color="#D1CDCD"></uni-icons> -->
			</view>
			<view class="titflex">
				<view class="itt" v-for="(item,index) in searchList" :key="index" @click="tipclick(item)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="">
			<view class="item " v-for="(item,index) in data.ulist" :key="index" @click.stop='godetail(item)'>
				<image :src="item.icon" mode="aspectFit"></image>
				<view class="item_r">
					<view class="title">{{item.name}}</view>
					<view class="item_flex" @click.stop="">
						<view class="price">
							<text>￥</text>{{item.price}}<text class="t2">/{{item.unit}}</text>
						</view>
						<countNum v-model.number="item.carCount" :shop='item'></countNum>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 66rpx;">

		</view>
		<view class="k1" v-if="keyWord && data.ulist.length == 0">
			<image src="/static/skong.png" mode=""></image>
			<view class="texts">
				暂无搜索内容
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		searchShop
	} from '@/common/http.api.js';
	const inputClearValue = ref('')
	const showClearIcon = ref(false)
	const keyWord = ref('')
	const searchList = ref([])

	const data = reactive({
		ulist: []
	})
	onLoad(() => {
		searchList.value = uni.getStorageSync('searchList') ? uni.getStorageSync('searchList') : []

	})
	function godetail(item) {
		uni.navigateTo({
			url: `/pages/index/shopdetail?shopid=${item.id}`
		})
	}

	function getList() {
		searchShop({
			name: inputClearValue.value
		}).then(res => {
			data.ulist.push(...res.rows)
		})
	}

	function changevalue(e) {
		if (e.detail.value != '') {
			showClearIcon.value = true;
		} else {
			showClearIcon.value = false;
			inputClearValue.value = ''
		}
	}

	function clearIcon() {
		showClearIcon.value = false
		inputClearValue.value = ''
		keyWord.value = ''
		data.ulist = []
	}

	function tipclick(item) {
		inputClearValue.value = item
		keyWord.value = item
		showClearIcon.value = true;
		data.ulist = []
		getList()
	}

	function confirminput(e) {
		keyWord.value = e.detail.value
		let index = searchList.value.findIndex(item => item === e.detail.value)
		//1 判断在不在 在就不添加
		//2 判断长度大于6就删除第一个在增加
		if (index == -1) {
			if (searchList.value.length >= 6) {
				searchList.value.shift()
				searchList.value.push(keyWord.value)
			} else {
				searchList.value.push(keyWord.value)
			}
		}
		data.ulist = []
		getList()
		uni.setStorageSync('searchList', searchList.value)

	}
</script>

<style lang="scss">
	page {
		background: #F7F8FC;
	}

	.k1 {
		text-align: center;
		margin: 120rpx auto;
		width: 360rpx;

		image {
			width: 360rpx;
			height: 360rpx;
		}

		.texts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin-top: 10rpx;
		}
	}

	.topfixed {
		width: 100%;
		position: sticky;
		top: 0;
		background-color: #F7F8FC;
		padding: 20rpx;
		box-sizing: border-box;
		z-index: 99;
	}

	.search_top {
		width: 710rpx;
		height: 80rpx;
		background: #fff;
		border-radius: 118rpx 118rpx 118rpx 118rpx;
		display: flex;
		align-items: center;
		padding: 0rpx 22rpx;
		box-sizing: border-box;

		.inputclass {
			font-weight: 500;
			font-size: 28rpx;
			color: #D1CDCD;
		}

		input {
			flex: 1;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000;
			padding-left: 10rpx;
		}
	}

	.search_ls {
		padding: 0rpx 40rpx;
		box-sizing: border-box;

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.titflex {
			display: flex;
			margin-top: 20rpx;
			flex-wrap: wrap;
		}

		.itt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #000000;
			line-height: 50rpx;
			height: 50rpx;
			background: #fff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 0rpx 20rpx;
			margin: 10rpx 20rpx 10rpx 0rpx;
		}
	}

	.item {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0rpx auto 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
			border: 1rpx solid #efefef;
		}

		.item_r {
			margin-left: 20rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
			}

			.item_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>